<template>
  <div class="home">
    <div class="top">
      <mytop :msg="msg"></mytop>
    <span>昵称：{{$store.state.user.user}}</span>
    </div>
    <div class="content">
      <myinput @cont="cont"></myinput>
    </div>
    <div class="col">
      <mycolor @getcol="getcol"></mycolor>
    </div>
    <div class="btn">
      <button v-if="$store.state.content!=''&&$store.state.color!=''" style="background:green" @click="createbox">许愿</button>
      <button v-else-if="$store.state.content==''||$store.state.color==''" disabled>再想想</button>
    </div>
    <div class="boxs">

    </div>
  </div>
</template>

<script>
import mytop from "@/components/input/top/top";
import myinput from '@/components/input/input/input'
import mycolor from '@/components/input/color/color'

export default {
  name: "Home",
  components: { mytop,myinput,mycolor },
  data() {
    return {
      msg: "许愿墙",
      content:'',
      color:''
    };
  },
  methods:{
    cont(val){
      this.content=val
    },
    getcol(val){
      this.color=val
      console.log(this.color);
    },
    createbox(){
     
    }

  }
};
</script>
<style lang="scss" scoped>
.home{
  .top{
    position: relative;
    span{
      position: absolute;
      top: 15px;
      left: 10px;
      color: orange;
    }
  }
  .btn{
    margin-top: 10px;
    button{
      width: 20%;
      height: 50px;
      outline: none;
      border: none;
      font-size: 20px;
    }
  }
}

</style>
